<template>
    <div >
        <HeaderIndex title="订单列表" :showTwo="false" id="HD"></HeaderIndex>
        <div id="DY" v-for="(v,i) in arr" :key="i" :title1="v.title.text" :title2="v.orderStatus" :title3="v.infos[0]" :title4="v.infos[1]" :title5="v.infos[2]" :title6="v.price" :imgurl="v.pic">
            <section>
                <div class="head">
                    <span class="sp1">
                        {{v.title.text}}  &nbsp;
                        <i class="iconfont icon-xiangyou"></i>
                    </span>
                    <span class="sp2"> {{v.orderStatus}} </span>
                </div>
            </section>
            <article>
                <img :src="v.pic | fliterImg" alt="">
                <div>
                    <span> {{v.infos[0]}} </span>
                    <p class="p1">{{v.infos[1]}}</p>
                    <p>{{v.infos[2]}}</p>
                </div>
            </article>
            <footer>
              <span>{{v.price}}</span> <button>删除订单</button>
            </footer>
        </div>
    </div>
</template>

<script>
import getLink from "@/api/getLink.js";
export default {
  props: ["title1", "title2", "title3", "title4", "title5", "title6", "imgurl"],
  data() {
    return {
      arr: []
    };
  },
  mounted() {
    getLink("/my/dianying").then(ok => {
      this.arr = ok.data;
    });
  }
};
</script>

<style scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
}
#DY {
  margin-top: 0.2rem;
  background-color: white;
}
.head {
  width: 92%;
  height: 0.75rem;
  line-height: 0.8rem;
  padding-right: 4%;
  padding-left: 4%;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.0001rem solid #ccc;
  font-size: 0.27rem;
}
.sp1 {
  color: #666666;
}
.sp2 {
  color: #999999;
}
i {
  color: #ccc;
  font-size: 0.27rem;
}
article {
  width: 100%;
  height: 2.2rem;
  position: relative;
}
img {
  width: 1.15rem;
  position: absolute;
  top: 0.28rem;
  left: 0.28rem;
}
article > div {
  position: absolute;
  top: 0.28rem;
  left: 1.75rem;
}
article > div > span {
  font-size: 0.32rem;
  display: block;
  margin-bottom: 0.4rem;
}
article > div > p {
  font-size: 0.2rem;
  margin-bottom: 0.045rem;
  color: #888888;
}
.p1 {
  font-weight: 800;
}
footer {
  width: 92%;
  height: 0.7rem;
  margin-left: 4%;
  padding-right: 4%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ccc;
}
footer > span {
  color: #888888;
}
footer > button {
  width: 1.46rem;
  height: 0.5rem;
  border: 1px solid #cccccc;
  color: #999999;
  background-color: white;
  font-size: 0.25rem;
  border-radius: 0.5rem;
}
</style>
